<template>
  <page-frame>
    <div class="accountDetails">
      <div class="toptitle">
        <div class="left">{{memberName}}<span>-</span>{{memberNo}}<span>-</span>账户详情</div>
        <div class="right">
          <div class="btns">
            <el-button class="lightGreenBtn btnStyle" @click="accountFlow">账户流水</el-button>

            <router-link :to="{name:'financialCenter'}">
              <el-button class="btnStyle">返回</el-button>
            </router-link>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="freeInfor">
        <el-form :model="ruleForm">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="账户余额:" prop="balance">
                <el-input v-model="ruleForm.balance" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="下一次扣费日期:" prop="nextDeducationDate">
                <span>{{ruleForm.nextDeducationDate}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="选择月份:" prop="packageName">
                <el-date-picker
                  v-model="month"
                  type="month"
                  @change="selectMonth"
                  placeholder="请选择月份">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="free-data">
        <el-row :gutter="50">
          <el-col :span="11" style="padding-top: 38px">
            <div class="pie-chart">
              <echart :chartOption="pieChartOption" :index="'first'"></echart>
            </div>
          </el-col>
          <el-col :span="11">
            <div class="tabs">
              <el-table
                :data="tableData"
                border
                style="width: 100%;margin-top: 40px">
                <el-table-column
                  prop="itemName"
                  label="费用项目"
                  width="">
                </el-table-column>
                <el-table-column
                  prop="price"
                  label="金额"
                  width="">
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </page-frame>

</template>

<script>
  import echart from '../../components/chart/echart';
  import financeCenterApi from '../../service/finance/financeCenterApi';
  import commonJs from '../../config/common';
  export default {
    data () {
      return {
        memberName:'',
        memberNo:'',
        currentAccountId:null,
        ruleForm:{
          balance:'',
          nextDeductionDate:'',
        },
        pieLabelNameArr:[],
        pieChartOption: {
          title: {
            text: '荆瑛四月费用明细',
            subtext: '',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: []
          },
          color: ["#3cbbb0", "#7089ce", "#faa753", "#f68d58", "#52d0cc", "#f6b91c", "#f68d58"],
          series: [
            {
              name: '费用明细',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: [],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        },
        month: '',
        queryData:{
          "accountId":null,
          "transTime":'',
        },
        active: 0,
        tabs: [{
          id: 0,
          name: "项目费用",
        }, {
          id: 1,
          name: "项目类型",
        }],
        tableData: [],
        currentMemberId: 0,
      }
    },
    methods: {
      init() {
        let self = this;
        self.currentMemberId = self.$route.params.memberId;
        self.currentAccountId = self.$route.params.accountId;
        //初始化时间
        var nowDate = commonJs.getCurrentDate();
        self.queryData.transTime = commonJs.getPreMonth(nowDate);
        self.month = self.queryData.transTime;
      },
      /**
       * 跳转到账户流水
       */
      accountFlow(){
        this.$router.push({name:'accountFlowing',params:{currentAccountId:this.currentAccountId}});
      },
      /**
       * 查询账户详细信息
       */
      getInfoDetail(){
        let self = this;
        //先清除旧数据
        self.pieLabelNameArr = [];
        self.pieChartOption.series[0].data = [];
        self.pieChartOption.legend.data = [];

        self.queryData.accountId = self.currentAccountId;
        financeCenterApi.getAccountInfoDetail(self.queryData).then(
          (response)=>{
            //基本信息
            self.memberName = response.data.data.memberName;
            self.memberNo = response.data.data.memberNo;
            self.ruleForm.balance = response.data.data.balance;
            self.ruleForm.nextDeducationDate = response.data.data.nextDeducationDate;

            self.pieChartOption.title.text = self.memberName+self.queryData.transTime+"费用明细";
            self.tableData = response.data.data.accountExpenseItemList;
            for(let i=0;i<self.tableData.length;i++){
              self.pieLabelNameArr.push(self.tableData[i].itemName);
              let pieSeriesDataObj = {
                value:null,
                name:''
              };
              pieSeriesDataObj.name = self.tableData[i].itemName;
              pieSeriesDataObj.value = self.tableData[i].price;
              self.pieChartOption.series[0].data.push(pieSeriesDataObj);
            }
            self.pieChartOption.legend.data = self.pieLabelNameArr;
          }
        );
      },
      /**
       * 选择月份 (根据月份改变显示详情)
       */
      selectMonth(){
        this.queryData.transTime = commonJs.formatDate(this.month).substring(0,7);
        //清空旧数据
        this.pieChartOption.legend.data = [];
        this.pieChartOption.series[0].data = [];
        this.getInfoDetail();
      },
    },
    components: {
      echart
    },
    mounted: function () {
      this.init();
    },
  }
</script>
<style>
  .accountDetails span {
    margin-left: 5px;
    margin-right: 5px;
  }

  .accountDetails .freeInfor .el-form{
    width: 100%;
    padding: 0;
  }

  .accountDetails .btnStyle {
    width: 100px;
  }

  .accountDetails .el-row-css {
    margin-top: 20px;
  }

  .accountDetails .free-data {
    margin-top: -30px;
  }
</style>
